<template>
    <div class="profile-containerBox">
    <div class="profile-container">
      <!-- 头部信息 -->
      <div class="profile-header">
        <div class="user-info">
          <div class="avatar-wrapper">
            <img src="https://q1.qlogo.cn/g?b=qq&nk=2832684504&s=640" alt="用户头像" class="avatar">
            <div class="online-status"></div>
          </div>
          <div class="basic-info">
            <div class="nickname">与花如笑</div>
            <div class="qq-number">ID：123</div>
          </div>
          <div class="like-count">
            <i class="like-icon">👍</i>
            <span>9999+</span>
          </div>
        </div>
      </div>
  
      <!-- 操作列表 -->
      <div class="action-list">
        <div class="action-item">
          <i class="action-icon">📝</i>
          <span>备注</span>
          <span class="action-value">张三</span>
        </div>
        <div class="action-item">
          <i class="action-icon">👥</i>
          <span>好友分组</span>
          <i class="arrow-icon">默认分组 ▼</i>
        </div>
        <div class="action-item">
          <i class="action-icon">✍️</i>
          <span>签名</span>
          <span class="action-value">........................</span>
        </div>
        <div class="action-item">
          <i class="action-icon">💬</i>
          <span>共享笔记</span>
          <i class="arrow-icon">></i>
        </div>
      </div>
  
      <!-- 底部按钮组 -->
      <div class="button-group">
        <button class="action-button share-btn">分享</button>
        <button class="action-button message-btn">发消息</button>
      </div>
    </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const userInfo = ref({
    nickname: '与花如笑',
    qq: '2832684504',
    likes: '9999+',
    isOnline: true,
    remark: '游戏号',
    signature: '........................'
  })
  </script>
  
  <style scoped>
  .profile-containerBox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .profile-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  .profile-header {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 12px;
  }
  
  .user-info {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
  }
  
  .avatar-wrapper {
    position: relative;
    margin-right: 16px;
  }
  
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .online-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: #44b549;
    border-radius: 50%;
    border: 2px solid white;
  }
  
  .basic-info {
    flex: 1;
  }
  
  .nickname {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  
  .qq-number {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
  }
  
  .online-text {
    font-size: 12px;
    color: #44b549;
  }
  
  .like-count {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    color: #666;
  }
  
  .like-icon {
    margin-right: 4px;
  }
  
  .badges {
    display: flex;
    gap: 8px;
    margin-top: 16px;
  }
  
  .badge {
    font-size: 20px;
  }
  
  .action-list {
    background: white;
    border-radius: 12px;
    margin-top: 50px;
  }
  
  .action-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .action-item:last-child {
    border-bottom: none;
  }
  
  .action-icon {
    margin-right: 12px;
    font-size: 18px;
  }
  
  .action-value {
    margin-left: auto;
    color: #666;
  }
  
  .arrow-icon {
    margin-left: auto;
    color: #999;
  }
  
  .button-group {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  
  .action-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
  }
  
  .share-btn {
    background-color: white;
    color: #333;
    border: 1px solid #e0e0e0;
  }
  
  .voice-btn {
    background-color: white;
    color: #333;
    border: 1px solid #e0e0e0;
  }
  
  .message-btn {
    background-color: #12b7f5;
    color: white;
    border: none;
  }
  
  .message-btn:hover {
    background-color: #00a0e9;
  }
  </style> 